
<!--
系统管理-角色管理页面
@author： hejie
-->

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script th:src="@{static/js/axios.min.js}"></script>
    <script th:src="@{static/js/qs.min.js}"></script>
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;

    }
    /*设置编辑 对话框的宽度*/
     .customWidth{
         width:80%;
     }
</style>

<body>


<!--独立：新增角色  对话框和js 开始-->
<!--点击“新增角色”，弹出对话框-->
<div id="addRoleInfo">
    <!--2.操作——“新增角色”，弹出模态框-->
    <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
        <el-form :model="form" :inline="true">
            <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="form.roleDesc" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <!--**********-->
                <el-tooltip :content="'Switch value: ' + form.status" placement="top">
                    <el-switch
                            v-model="form.status"
                            active-color="#13ce66"
                            inactive-color="#bfbfbf"
                            active-value="1"
                            inactive-value="-2">
                    </el-switch>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="菜单权限" :label-width="formLabelWidth">
                <div class="block">
                    <span class="demonstration">菜单权限选择</span>
                    <el-cascader
                            v-model="form.menuPermissionArray"
                            :options="options"
                            :props="props"
                            collapse-tags
                            clearable></el-cascader>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,addRoleInfo()">确 定</el-button>
        </div>
    </el-dialog>
</div><!--第2个div结束-->

<script type="text/javascript" th:inline="javascript">
    /*1.div：“新增角色”*/
    let addRoleInfo = new Vue({
        el: "#addRoleInfo", //绑定的div
        data() {
            return {
                //tableData是表格中的数据。  datas.goods是为了后端查询数据为空时有一个数据
                dialogFormVisible: false,  //这是点击新增之后，原本隐藏的 编辑框就变为true，就显示编辑框
                form:{      //这个是编辑里面的form表单，以下是表单要修改的内部的字段名
                    roleDesc: '',
                    status: '1',
                    menuPermissionArray:[]  //角色的权限
                },

                //菜单权限
                props: { multiple: true },
                options: [{
                    value: 1,
                    label: '系统管理',
                    children: [{
                        value: 3,
                        label: '账号管理'
                    }, {
                        value: 4,
                        label: '角色管理'
                    }, {
                        value: 5,
                        label: '系统日志'
                    }]
                }, {
                    value: 'others',
                    label: '其他',
                    disabled: true
                }],

                formLabelWidth: '120px'
            };
        },
        methods: {
            //修改密码

            //后端还没有做
            //新增一个roleInfo
            addRoleInfo : ()=>{
               if (addRoleInfo.form.roleDesc==''){
                   alert("请填写角色名称");
               }else if (addRoleInfo.form.menuPermissionArray==[]){
                   alert("请选择菜单权限");
               }else {
                   console.log("addRoleInfo.form.menuPermissionArray="+addRoleInfo.form.menuPermissionArray);
                   let params =new FormData();
                   params.append("status",addRoleInfo.form.status);
                   params.append("roleDesc",addRoleInfo.form.roleDesc);
                   params.append("menuPermissionArray",addRoleInfo.form.menuPermissionArray);
                   axios.post([[@{role/more}]],params)
               .then(function (res) {
                       console.log(res);
                       if (res.data.code == 200){
                           alert("新增角色成功");
                       }
                       location.reload();
                   })
                   .catch(function (error) {
                       console.log(error);
                   });
               }
            }
        }
    });//end vue


</script>
<!--独立：新增角色  对话框和js 结束-->







<!--3.div：第3个div开始-->
<!--“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索-->
<div id="app">
    <!--<div id="appso">-->
    <el-row class="demo-autocomplete">
        <el-col :span="2">角色名称</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="findRole.roleDesc"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>

        <el-col :span="2">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态</el-col>
        <el-col :span="6">
            <el-select v-model="findRole.status" placeholder="请选择状态" size="small">
                <el-option label="---" value="0"></el-option>
                <!--角色状态：启用是1， 禁用是-2-->
                <el-option label="已禁用" value="-2"></el-option>
                <el-option label="已启用" value="1"></el-option>
            </el-select>
        </el-col>

        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="findWhenLoad()">查询</el-button>
            <el-button type="primary" icon="el-icon-download" size="small" @click="exportList()">导出</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="showAddDialog()">新增角色</el-button>
        </el-col>
    </el-row>
    <!--搜索框和按钮结束-->


    <!--<div id="app">-->
    <!--1.表格-->
    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;font-size: 10px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}" >
            <el-table-column
                    prop="roleDesc"
                    label="角色名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="status"
                    :formatter="statusFormatter"
                    label="状态"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="createor"
                    label="创建人"
                    align="center"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    :formatter="dateFormatter"
                    label="创建时间"
                    align="center"
                    width="170">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
                    width="220">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button type="text" size="small" @click="enable_disable(scope.row.id,scope.row.status)" >
                        <span v-if="scope.row.status== 1" >禁用</span>
                        <span v-else="scope.row.status== -2" >启用</span>
                    </el-button>
                    <el-button type="text" size="small" @click="dialogFormVisible = true,fill_roleInfo(scope.row)" >编辑</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- @size-change：绑定每页数据size，并刷新数据  -->
        <!-- @current-change:绑定当前页码，并刷新数据  -->
        <!--@size-change="handleSizeChange"-->
        <el-pagination
                v-if="!noResult&&!error"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total,prev, pager, next, jumper"
        :total="total">
        </el-pagination>

    </template>


    <!--2.操作——“编辑”，弹出模态框-->
    <el-dialog title="编辑角色" :visible.sync="dialogFormVisible">
        <el-form :model="form" :inline="true">
            <el-input v-model="form.roleInfo_id" value="form.roleInfo_id" style="display: none" autocomplete="off"></el-input>
            <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="form.roleDesc" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <!--说明：当用如上的【active-value="1" inactive-value="0"】，此时的【active-value】值类型为string，如果要求【active-value】值类型为number时，必须在其前面加上    :-->
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-tooltip :content="'Switch value: ' + form.status" placement="top">
                    <el-switch
                            v-model="form.status"
                            active-color="#13ce66"
                            inactive-color="#bfbfbf"
                            :active-value="1"
                            :inactive-value="-2">
                    </el-switch>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="菜单权限" :label-width="formLabelWidth">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-cascader
                            v-model="form.menuPermissionArray"
                            :options="options"
                            :props="props"
                            collapse-tags
                            clearable></el-cascader>
                </div>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,mod(form.roleInfo_id)">确 定</el-button>
        </div>
    </el-dialog>

</div><!--第3个div结束-->

<!--对应第1个div-->
<script type="text/javascript" th:inline="javascript">
    <!--页面加载完毕后,把后端查询的数据显示在table中-->
    window.onload=function () {
        // demo.findWhenLoad(1);
        demo.findWhenLoad();
    }


    <!--1.div：“搜索”、“导出”：根据用户名、职位、手机号、状态、角色来搜索。table-->
    /**table中的数据*/
        //数据
    let datas = {
            goods: [
                {
                    roleDesc: 'admin',
                    status: '已启用',
                    createor: 'c创建人',
                    createTime:""
                }
            ]
        };

    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                //tableData是表格中的数据。  datas.goods是为了后端查询数据为空时有一个数据
                tableData: datas.goods,  //  datas数据 中的数组goods
                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                form:{      //这个是编辑里面的form表单，以下是表单要修改的内部的字段名
                    roleInfo_id:'',//被点击行的roleInfo.id
                    roleDesc: '',
                    status: '1',
                    menuPermissionArray:[],
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''  //截至这里编辑框内的内容结束
                },

                //菜单权限
                props: { multiple: true },
                options: [{
                    value: 1,
                    label: '系统管理',
                    children: [{
                        value: 3,
                        label: '账号管理'
                    }, {
                        value: 4,
                        label: '角色管理'
                    }, {
                        value: 5,
                        label: '系统日志'
                    }]
                }, {
                    value: 'others',
                    label: '其他',
                    disabled: true
                }],

                formLabelWidth: '120px',

                // total,
                //搜索的关键字
                findRole:{
                    roleDesc:'',
                    status:''
                },
                //当前的页码
                currentPage:1,
                total:1,//总页数
                noResult:'',
                error:'',

                //原来属于appo的数据
                restaurants: [],
                state1: '',
                state2: ''
            };
        },
        methods: {
            //提示：成功的信息message
            success_msg(message) {
                this.$message({
                    message: message,
                    type: 'success'
                });
            },
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },

            // 日期格式化
            dateFormatter (row, column) {
                let datetime = row.createTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },

            // 禁用状态格式化
            statusFormatter(row, column) {
                let status = row.status;
                //双等号 不比较数据类型，看起来一样就行
                if(status == -2){
                    return '已禁用';
                } else {
                    return '已启用';
                }
            },
            //我在pom.xml中引入了“jackson-databind”包
            //点击“导出”，把当前Tabledata通过json方式传递到后端（后端把数据写为一个Excel文件）
            exportList:function (){
                //转换一下，提交转换后的对象
                function TableDataBeanTemp(){};
                let tableDataBeanTemp=new TableDataBeanTemp();
                // tableDataBeanTemp.simpleFileNameUserSet="测试RoleInfo的前端表格，是否可以使用simpleFileNameUserSet";
                tableDataBeanTemp.simpleFileNameUserSet=null;
                tableDataBeanTemp.tableDataJson=demo.tableData;
                let tableDataBean=JSON.stringify(tableDataBeanTemp);

                axios.post([[@{role/exportList}]],tableDataBean,{headers:
                        {'Content-Type':'application/json;'}
                })
                .then((response)=>{
                    console.log(response);
                    if (response.data.code == 200){
                        demo.success_msg("导出成功，请到系统管理-下载中心进行下载");
                    }
                })
                .catch((err)=>{console.log(err)});
            },

            //打开“新增角色”对话框
            showAddDialog:()=>{
                //想打开对话框
                addRoleInfo.dialogFormVisible=true;
                //把“其他”默认选中（而且不可以编辑的）
                addRoleInfo.form.menuPermissionArray=[];
                addRoleInfo.form.menuPermissionArray.push("others");
            },

            // 当前的页码，改变时会触发
            handleCurrentChange:function (currentPage) {
                demo.currentPage=currentPage;
                demo.findWhenLoad();
            },

            //分页查询数据：把后端的数据，显示在table上
            findWhenLoad() {
                console.log("in findWhenLoad");
                let statusRaw=this.findRole.status;
                /*if (this.findRole.status=='-1'){
                    statusRaw='0';
                }else if (this.findRole.status=='1'){
                    statusRaw='1';
                }*/
                axios.get([[@{role/page}]],{
                    params:{
                        pageNum : this.currentPage,
                        //搜索的关键字
                        roleDesc:this.findRole.roleDesc,
                        status: statusRaw
                    }
                })
            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                    console.log("res.data.list="+res.data.list);
                    console.log("res.data.total="+res.data.total);
                    this.total = res.data.total;
                    this.tableData = res.data.list;
                    /*this.noResult = false
                    if (this.total === 0) {
                        this.noResult = true
                    }
                    this.error = false
                    this.loading = false*/
                })
                .catch(error => {
                    console.log(error);
                });
            },

            //点击表格中某一行的“编辑后”，在 弹出的对话框中填充数据
            fill_roleInfo:(roleInfo)=>{
                /*let status=roleInfo.status;
                if (status==0){
                    status='-1';
                }else {
                    status='1';
                }*/
                //教训：一定是demo.   不要写  this.
                demo.form.roleInfo_id=roleInfo.id;
                demo.form.roleDesc=roleInfo.roleDesc;
                demo.form.status=roleInfo.status;
                console.log("demo.form.roleDesc="+demo.form.roleDesc);
                console.log("demo.form.status="+demo.form.status);
                //赋值初值
                demo.form.menuPermissionArray=[];

                //"其他"菜单
                demo.form.menuPermissionArray.push('others');
                for (let i=0; i<roleInfo.menuInfos.length; i++){
                    //账号管理、角色管理、运营日志、数据字典
                    if ((roleInfo.menuInfos[i].id >=3 && roleInfo.menuInfos[i].id <=5)){
                        let p='1,'+roleInfo.menuInfos[i].id;
                        demo.form.menuPermissionArray.push(p);
                    }
                }
                console.log("demo.form.menuPermissionArray="+demo.form.menuPermissionArray);
            },

            //修改状态；启用和禁用状态之间互相转换
            enable_disable : (id,status)=>{
                //角色的状态：启动--1，禁止-- -2。双等不比较类型
                let newStatus=0;
                if (status==1){
                    newStatus=-2;
                }else{
                    newStatus=1;
                }

                let params =new FormData();
                params.append("status",newStatus);
                axios.put([[@{/role/status/}]] + id,params).then(res => {
                    console.log(res);
                    if (res.data.code == 200){
                        alert("状态修改成功");
                    }
                    location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },

            //“编辑”修改 一个role_info数据
            mod : (id)=>{
                if (demo.form.roleDesc==''){
                    alert("请输入角色名称");
                }else if (demo.form.menuPermissionArray==''){
                    alert("请选择权限");
                }else {
                    let params =new FormData();
                    params.append("id",demo.form.roleInfo_id);
                    params.append("roleDesc",demo.form.roleDesc);
                    params.append("status",demo.form.status);
                    params.append("menuPermissionArray",demo.form.menuPermissionArray);

                    axios.put([[@{/role/edit}]],params)
                    .then(res => {
                        console.log(res);
                        if (res.data.code == 200){
                            alert("修改成功");
                        }
                        location.reload();
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            },

            //"查看"的点击事件 line=scope.row,当前行的所有参数
            handleClick(line) {
                alert(line.id);
            },
            // del:function(id){
            //     this.tableData.splice(id,1);
            // },
            //删除，点击删除之后，给后台指令，后台回到前端页面刷新页面。
            del: function (id) {
                alert(id);
                this.tableData.splice(id, 1);
                let that = this
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$http("删除操作的路径名" + id)//“”+接上删除的id值
                        .then(function (respDate) {
                            if (respDate.data == "success") {
                                that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                that.toPage(that.currentPage);
                            } else {
                                that.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                                that.toPage(that.currentPage);
                            }
                        })
                }).catch(() => {
                    this.$message({

                        type: 'info',
                        message: '已取消删除'

                    });
                });
            },//删除方法截止


            //原来属于appo中的方法
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "", "address": "天山西路389号"},
                    {"value": "", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            }
        },//method方法截止

        //查询所有的角色，用来做<option>
        created : function () {

        },
        mounted() {
            this.restaurants = this.loadAll();
        }
        // 局部过滤器，仅针对当前  组件（#app <div>）有效
        /*filters:{
            dateYMDHMSFormat:date=>{
              let d=  new date;
              d.get
                return date.toLocaleLowerCase();
            }
        }*/
    });

    //分页还没写======


</script>



<!--分页？-->
<div id="paging">

</div>




</body>


</html>